<script setup>
import { ref, onMounted } from "vue";
import data from "@/assets/data/data.json";

import router from "@/router/index.js";

const isPC = ref(true);
onMounted(() => {
  isPC.value = window.innerWidth > 768;
});
const jumpTo = (index) => {
  // 跳转到指定路由
  router.push(data.Home.to.map((item) => item)[index]);
};
</script>

<template>
  <!--header start-->
  <div class="header">
    <div class="h_top">
      <div class="h_logo">
        <img src="@/assets/pictures/logo_white.png" />
      </div>
      <!-- pc端导航 -->
      <div class="h_nav" v-if="isPC">
        <ul>
          <li v-for="(i, index) in data.Home.header" :key="index">
            <router-link :to="data.Home.to[index]">{{ i }}</router-link>
          </li>
        </ul>
      </div>
      <!-- 移动端导航 -->
      <div class="h_nav_m" v-else-if="!isPC">
        <a-dropdown trigger="hover">
          <a-button>菜单</a-button>
          <template #content>
            <a-doption
              v-for="(i, index) in data.Home.header"
              :key="index"
              @click="jumpTo(index)"
            >
              {{ i }}
            </a-doption>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
  <!--end header-->

  <router-view></router-view>

  <!--footer start-->
  <div class="footer">
    <span>{{ data.Home.footer.tel }}</span
    ><span>{{ data.Home.footer.email }}</span
    ><span>{{ data.Home.footer.address }}</span>
  </div>
  <div class="copyright">
    <span>{{ data.Home.copyright }}</span>
  </div>
  <!--end footer-->
</template>

<style scoped lang="less">
//header
.header {
  width: 100%;
  height: 70px;
  background-color: rgba(22, 22, 24, 0.8);
}
.header .h_top {
  width: auto;
  height: 70px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  width: 320px;
  padding: 20px;
}
.header .h_top .h_nav ul li {
  list-style: none;
  float: left;
}
.header .h_top .h_nav ul li a {
  text-decoration: none;
  display: block;
  line-height: 70px;
  padding: 0 20px 0 20px;
  color: #f7f7fc;
  font-size: 17px;
  font-weight: 600;
  margin: 0 5px 0 5px;
}
.header .h_top .h_nav ul li a:hover {
  background: #b5b5b7;
}

// footer
.footer {
  height: 70px;
  background: #2d2e31;
  margin: 10px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  span {
    color: white;
    text-align: center;
  }
}
.copyright {
  height: 35px;
  background: #29292b;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    color: white;
  }
}
</style>
